import React, { useState } from 'react';
import {
  Card,
  Modal,
  Grid,
  Avatar,
} from 'antd-mobile';
import {
  StarOutline,
  RightOutline,
  GiftOutline,
} from 'antd-mobile-icons';
import styles from './BellaEnglish.css';
import { FootToolbar } from '@/components/footToolbar';
import { EditOutlined, udp, useAsyncEffect } from '@cscec/udp-mobile-ui';
import ReadOutlined from '@ant-design/icons/lib/icons/ReadOutlined';
import WechatOutlined from '@ant-design/icons/lib/icons/WechatOutlined';
import FontColorsOutlined from '@ant-design/icons/lib/icons/FontColorsOutlined';
import { getList } from './service';

// 类型定义
// interface Textbook {
//   id: string;
//   name: string;
//   level: string;
//   color: string;
//   ribbonColor: string;
// }

interface AlertInfo {
  title: string;
  message: string;
}

const BellaEnglish: React.FC = () => {
  const { imgUrl } = udp.getUser()
  const [alertVisible, setAlertVisible] = useState(false);
  const [alertInfo, setAlertInfo] = useState<AlertInfo>({
    title: '功能开发中',
    message: '这个有趣的功能正在快马加鞭开发中哦！'
  });

  // 功能卡片数据
  const features = [
    { id: 'think', title: 'THiNK', des: '趣味课文', icon: <ReadOutlined /> },
    { id: 'kb', title: 'KB', des: '基础语法', icon: <EditOutlined /> },
    { id: 're', title: 'RE', des: '阅读表达', icon: <WechatOutlined /> },
    { id: 'spell', title: '拼写', des: '单词游戏', icon: <FontColorsOutlined /> }
  ];
  const [bookType, setbookType] = useState<any>(features)

  useAsyncEffect(async () => {
    //获取主题
    const res = await getList({ pageIndex: 1, pageSize: 999 })
    if (res.record.length > 0) {
      console.log(res.record)
      const result: any = []
      res.record.forEach((element, index) => {
        result[index] = { ...features[index], ...element }
      })
      console.log(result)
      setbookType(result)
    }
  }, [])


  // 显示提示弹窗
  const showAlert = (title: string, message: string) => {
    setAlertInfo({ title, message });
    setAlertVisible(true);
  };

  // 处理功能卡片点击
  const handleFeatureClick = (it: any) => {
    if (it.title === 'KB' 
      //|| it.title === 'THiNK'
    ) {
      console.log(it)
      udp.open('/ActualOutPutVal/list', { title: it.title, des: it.des, typeCode: it.typeCode })
      // 检查是否有上次选择的教材
      // if (localStorage.getItem('lastSelectedTextbook')) {
      //   // 直接进入上次选择的教材单元页
      //   Toast.show(`进入${selectedTextbook}教材`);
      // } else {
      //   setTextbookModalVisible(true);
      // }
    } else {
      // 其他功能显示开发中提示
      let tit = '', message = '';
      switch (it.title) {
        case 'THiNK':
          tit = 'THiNK 即将上线！';
          message = '有趣的课文故事正在打包中，很快就能和大家见面啦！😊';
          break;
        case 'RE':
          tit = 'RE 开发中！';
          message = '超棒的阅读表达训练，正在快马加鞭赶来哦！🚀';
          break;
        case 'Phonics':
          tit = '拼写游戏coming soon！';
          message = '好多好玩的单词拼写游戏，敬请期待呀！🎉';
          break;
      }
      showAlert(tit, message);
    }
  };

  return (
    <div className={styles["bella-container"]}>
      {/* 顶部渐变头部 */}
      <header className={styles["top-gradient"]}>
        <div className={styles["header-content"]}>
          <div className={styles["header-top"]}>
            <div className={styles["logo-container"]}>
              <div className={styles["logo-icon"]}>
                <StarOutline />
              </div>
              <h1 className={styles["app-title"]}>贝拉英语</h1>
            </div>
            <Avatar
              src={imgUrl}
              className={styles["user-avatar"]}
            //className="user-avatar floating-delay-1"
            />
          </div>

          <div className={styles["welcome-message"]}
          //className="welcome-message floating-delay-2"
          >
            <p>嗨，小勇士！</p>
            <p>今天也要快乐学英语哦！</p>
          </div>
        </div>

        <div
          className={styles["circle-1"]}
        //className="floating-circle circle-1"
        ></div>
        <div
          className={styles["circle-2"]}
        //className="floating-circle circle-2"
        > </div>
        <div
          className={styles["circle-3"]}
        //className="floating-circle circle-3"
        ></div>
      </header>

      {/* 主要内容区域 */}
      <main className={styles["main-content"]}>
        <Grid columns={2} gap={12}>
          {bookType.map(feature => (
            <Grid.Item key={feature.id}>
              <Card
                className={feature.title === 'kb' ? styles["feature-card"] : styles["feature-card"]}
                //className={`feature-card ${feature.title === 'kb' ? 'kb-card' : ''}`}
                onClick={() => handleFeatureClick(feature)}
              >
                <div className={styles["card-icon"]}>{feature.icon}</div>
                <h3>{feature.title}</h3>
                {/* <p>{feature.des}</p> */}
                <div className={styles["card-arrow"]}>
                  <RightOutline />
                </div>
              </Card>
            </Grid.Item>
          ))}
        </Grid>
      </main>

      {/* 底部导航 */}
      <FootToolbar />

      {/* 提示弹窗 */}
      <Modal
        visible={alertVisible}
        bodyClassName="alert-modal"
        onClose={() => setAlertVisible(false)}
        closeOnAction
        actions={[
          {
            key: 'ok',
            text: '知道啦！',
            primary: true
          }
        ]}
        content={<div className="alert-content">
          <div className="alert-icon">
            <GiftOutline />
          </div>
          <h3>{alertInfo.title}</h3>
          <p>{alertInfo.message}</p>
        </div>}
      />
    </div>
  );
};

export default BellaEnglish;